<template>
  <div class="container bg2" style="height: 1440rpx">
    <div class="title">
      <h2>学习影视后期制作 紧跟行业发展趋势</h2>
      <p class="f-title">
        电影、广告等传统媒体以及元宇宙新兴领域的发展，将为影视后期行业
      </p>
    </div>
    <ul class="advantage-list">
      <li class="item">
        <img src=" @/assets/course/p1-imgs1.png" />
        <div class="info">
          <h2>国家政策支持</h2>
          <span></span>
          <p>
            网络视听产业蓬勃发展<br />
            国家出台多项政策支持
          </p>
        </div>
      </li>
      <li class="item">
        <div class="info_l info">
          <h2>国家政策支持</h2>
          <span></span>
          <p>
            网络视听产业蓬勃发展<br />
            国家出台多项政策支持
          </p>
        </div>
        <img src=" @/assets/course/p1-imgs2.png" />
      </li>
      <li class="item">
        <img src=" @/assets/course/p1-imgs3.png" />
        <div class="info">
          <h2>国家政策支持</h2>
          <span></span>
          <p>
            网络视听产业蓬勃发展<br />
            国家出台多项政策支持
          </p>
        </div>
      </li>
      <li class="item">
        <div class="info_l info">
          <h2>国家政策支持</h2>
          <span></span>
          <p>
            网络视听产业蓬勃发展<br />
            国家出台多项政策支持
          </p>
        </div>
        <img src=" @/assets/course/p1-imgs4.png" />
      </li>
    </ul>
    <div class="more-btn">更多职业优势</div>
  </div>
</template>
<script setup></script>
<style lang="scss" scoped>
.advantage-list {
  padding: 0;
  width: 100%;
  padding: 0 20rpx;
  box-sizing: border-box;
  .item {
    width: 100%;
    position: relative;
    img {
      width: 100%;
      height: auto;
    }

    .info {
      top: 6rpx;
      right: 0;
      width: 358rpx;
      height: 204rpx;
      position: absolute;
      h2 {
        margin-top: 26rpx;
        margin-left: 16rpx;
        font-size: 38rpx;
        font-weight: bold;
        line-height: 38rpx;
        color: #feebde;
      }
      span {
        margin-top: 22rpx;
        margin-left: 16rpx;
        width: 20rpx;
        height: 3rpx;
        display: block;
        background: #e8e8e8;
      }
      p {
        margin-top: 16rpx;
        margin-left: 16rpx;
        font-size: 30rpx;
        line-height: 38rpx;
        color: #e8e8e8;
      }
    }
    .info_l {
      left: 0;
    }
  }
}
</style>
